import React from 'react'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu, Button } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
export default function Home() {
  const items = [
    {
      key: 'sub1',
      label: '首页',
      icon: <MailOutlined />,

    },
    {
      key: 'sub2',
      label: '管理',
      icon: <AppstoreOutlined />,
      children: [
        {
          key: '5',
          label: '内容管理',
        },
        {
          key: '6',
          label: '评论管理',
        },
        {
          key: 'sub3',
          label: 'Submenu',
          children: [
            {
              key: '7',
              label: '专栏管理',
            },
            {
              key: '8',
              label: 'Option 8',
            },
          ],
        },
      ],
    },
    {
      type: 'divider',
    },
    {
      key: 'sub4',
      label: '数据',
      icon: <SettingOutlined />,
      children: [
        {
          key: '9',
          label: '作品数据',
        },
        {
          key: '10',
          label: '收益数据',
        },
        {
          key: '11',
          label: 'Option 11',
        },
        {
          key: '12',
          label: 'Option 12',
        },
      ],
    },
    {
      key: 'grp',
      label: 'Group',
      type: 'group',
      children: [
        {
          key: '13',
          label: 'Option 13',
        },
        {
          key: '14',
          label: 'Option 14',
        },
      ],
    },
  ];
  let navigate = useNavigate();
  const onClick = (e) => {
    // console.log('click ', e);
    console.log(e.key);
    if (e.key === 'sub1') {
      navigate('/home/list')
    }
  };
  return (
    <div style={{ display: 'flex' }}>
      <div>
        <Button type="primary" size='large' className='btn' onClick={() => {
          navigate('/add')
        }}>
          发布 ↓
        </Button>
        <Menu
          className='menu'
          onClick={onClick}
          style={{
            width: 256,
          }}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          items={items}
        />
      </div>

      <div className="lright">
        <Outlet></Outlet>

      </div>
    </div>
  )
}
